<template>
    <ul>
      <li v-for="(item,index) in list" :class="['uu'+index]" :key="item+index" v-if="list.length" >
          <div class="comment-list-box-main">
            <div class="comment-list-box-main-content">{{item.content}}</div>
            <div class="clearfix comment-list-box-main-name">
              <div>{{item.username}}</div>
              <div>{{moment(item.created_at).format('YYYY-MM-DD HH:mm')}}</div>
              <div class="comment-reply-btn" v-if="childIndex+1<reply_num" @click="setPid({ev:$event,id:item.id,replyIndex:childIndex+1,orginDataIndex:index})">回复</div>
            </div>
          </div>
          <commentlist :childIndex="childIndex+1" v-if="item.commentList && item.commentList.length && childIndex+1<reply_num" @setpid="setPid" :list="item.commentList" ></commentlist>  
      </li>
    </ul>
</template>

<script>
export default {
  name: 'commentlist',
  data(){
    return {
      reply_num:5
    }
  },
  props: {
    list: {
      type:Array,
      default(){
        return [];
      }
    },
    childIndex:{
      type:Number,
      defualt:0
    }
  },
  methods:{
    setPid(obj){
      // if(obj && obj.ev && obj.ev.target){
       let arr = [];
       var ali = ($(obj.ev.target).parents('li'))
       ali.each((index,item)=>{
         arr.push($(item).attr('class').replace('uu',''))
       })
      
       this.$emit('setpid',{
        ev:obj.ev,
        id:obj.id,
        orginDataIndex:arr.reverse()
        });
      // }
    },
    getParentNode(tar){
      let domNode = [];

      function getParent(tar){
        if(tar.parentNode){
          domNode.push(tar.parentNode);
          getParent(tar.parentNode)
        }
      }
      getParent(tar);
      return domNode;
    }
  }
}
</script>
